<template>
    <div class="main-body">
        <page-title title="最新动态" />
        <!-- 新闻数据 -->
        <div class="row row-01">
            <div class="container">
                <div class="news">
                    <div class="title">
                        <h1>最新消息</h1>
                    </div>
                    <!-- 设置flex格式，然后爱咋搞咋搞 -->
                    <!-- 循环 -->
                    <div class="items">
                        <div class="item-news" v-for="item in newsList">
                            <div class="pic">
                                <img :src="item.img">
                            </div>
                            <div class="item-detail">
                                <div class="item-time">
                                    <!-- 时间使用绿色 h5 -->
                                    <p>{{ item.date }}</p>
                                </div>
                                <div class="item-title">
                                    <!-- 标题使用h2 加粗黑体 -->
                                    <h2>{{ item.title }}</h2>
                                </div>
                                <div class="item-btn">
                                    <!-- 按钮要求有动画效果，，鼠标移入时触发 -->
                                    <button data-text="Go To Page"
                                        class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up">
                                        <div class="btn-borders">
                                            <div class="border-top"></div>
                                            <div class="border-right"></div>
                                            <div class="border-bottom"></div>
                                            <div class="border-left"></div>
                                        </div>
                                        <span class="btn-text">Read More+</span>
                                    </button>
                                </div>
                            </div>
                            <div class="item-preview">
                                <p>
                                    我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容,我是大概内容，我是大概内容
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 组件引入
import PageTitle from "@/components/PageTitle/index.vue"





// 新闻啥的
const newsList = ref([
    {
        img: '/src/assets/list/01.jpg',
        title: '这个比上台领奖了',
        date: '11,November,2023'
    },
    {
        img: '/src/assets/list/02.jpg',
        title: '这个比上台演讲了',
        date: '11,November,2023'
    },
    {
        img: '/src/assets/list/03.jpg',
        title: 'HarmonyOS福州线下发布会',
        date: '23,December,2023'
    },
    {
        img: '/src/assets/list/04.jpg',
        title: '不知道小余啥时候偷拍的',
        date: '17,September,2023'
    },
])
</script>

<style scoped lang="scss">
.main-body {
    min-height: 800px;
}

/* 最新动态 */
.news {
    max-width: var(--min-width);
    margin: 50px auto;

    .title {
        // 居中黑色
        margin-bottom: 100px;
        text-align: center;

        h1 {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(120deg, var(--secondary-color) 0%, rgba(5, 89, 96, 0.95) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0px;
        }
    }

    .items {
        // 设置弹性布局格式，一排2个
        // display: flex;
        // justify-content: space-between;
        // margin-bottom: -40px;
        // flex-direction: row;
        // flex-wrap: wrap;

        .item-news {
            // width: 80%;
            display: grid;
            grid-template-columns: 1.5fr 2fr 6fr;
            gap: 2rem;
            margin-bottom: 40px;
            animation: sideUp .2s forwards;

            // &:nth-child(1) {
            //     animation-delay: 0s;
            // }

            // &:nth-child(2) {
            //     animation-delay: 0.5s;
            // }

            // &:nth-child(3) {
            //     animation-delay: 1s;
            // }

            // &:nth-child(4) {
            //     animation-delay: 2s;
            // }

            // sass写法，做循环进行添加 
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    animation-delay: $i * 0.1s;
                }
            }

            .pic {
                width: 260px;
                height: 177px;

                img {
                    border-radius: 3px;
                    height: 100%;
                    width: 100%;
                    /* 设置图片的高度 */
                    object-fit: cover;
                }
            }

            .item-detail {
                // width: 40%;
                padding: 3px;

                .item-time {
                    p {
                        line-height: normal;
                        margin-bottom: 3px;
                        color: var(--secondary-color);
                        text-indent: 0;
                        font-size: 16px;
                        // font-weight: 700;
                    }
                }

                .item-title {
                    margin: 10px 0 20px 0;

                    h2 {
                        min-height: 64px;
                        font-size: 24px;
                    }
                }

                .item-btn {
                    margin: 12px 0 0 0;

                    // button {
                    //     border: 2px solid rgba($color: #94a3b8, $alpha: 0.2);
                    //     padding: 13px 28px;
                    //     font-size: 12px;
                    //     background: none;
                    //     cursor: pointer;
                    // }
                    // 不想自己写，偷的
                    .btn {
                        --hue: 144;
                        --ease-in-duration: 0.25s;
                        --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
                        --ease-out-duration: 0.65s;
                        --ease-out-delay: var(--ease-in-duration);
                        --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
                        position: relative;
                        padding: 13px 28px;
                        font-size: 12px;
                        line-height: 1.5;
                        color: white;
                        text-decoration: none;
                        background-color: hsl(var(--hue), 59%, 35%);
                        border: 1px solid hsl(var(--hue), 59%, 35%);
                        outline: transparent;
                        overflow: hidden;
                        cursor: pointer;
                        user-select: none;
                        white-space: nowrap;
                        transition: 0.25s;

                        &:hover {
                            background: hsl(var(--hue), 100%, 31%);
                        }

                        &-primary {
                            --hue: 171;
                        }

                        &-ghost {
                            color: hsl(var(--hue), 59%, 35%);
                            background-color: transparent;
                            border-color: hsl(var(--hue), 59%, 35%);

                            &:hover {
                                color: white;
                            }
                        }

                        &-border-stroke {
                            border-color: hsla(var(--hue), 59%, 35%, 0.35);

                            .btn-borders {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;

                                .border-top {
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 1px;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleX(0);
                                    transform-origin: left;
                                }

                                .border-right {
                                    position: absolute;
                                    right: 0;
                                    width: 1px;
                                    height: 100%;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleY(0);
                                    transform-origin: bottom;
                                }

                                .border-bottom {
                                    position: absolute;
                                    bottom: 0;
                                    width: 100%;
                                    height: 1px;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleX(0);
                                    transform-origin: left;
                                }

                                .border-left {
                                    position: absolute;
                                    left: 0;
                                    width: 1px;
                                    height: 100%;
                                    background: hsl(var(--hue), 59%, 35%);
                                    transform: scaleY(0);
                                    transform-origin: bottom;
                                }

                                // when unhover, ease-out left, bottom; ease-in right, top

                                .border-left {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-bottom {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-right {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-top {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }
                            }

                            &:hover {
                                color: hsl(var(--hue), 59%, 35%);
                                background: transparent;

                                .border-top,
                                .border-bottom {
                                    transform: scaleX(1);
                                }

                                .border-left,
                                .border-right {
                                    transform: scaleY(1);
                                }

                                // when hover, ease-in left, bottom; ease-out right, top

                                .border-left {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-bottom {
                                    transition: var(--ease-in-duration) var(--ease-in-exponential);
                                }

                                .border-right {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }

                                .border-top {
                                    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
                                }
                            }
                        }

                        &-text-float-up {
                            &::after {
                                position: absolute;
                                content: attr(data-text);
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                opacity: 0;
                                transform: translateY(35%);
                                transition: 0.25s ease-out;
                            }

                            // when hover, ease-in top-text; ease-out bottom-text

                            .btn-text {
                                display: block;
                                transition: 0.75s 0.1s var(--ease-out-exponential);
                            }

                            &:hover {
                                // when hover, ease-in bottom-text; ease-out top-text

                                .btn-text {
                                    opacity: 0;
                                    transform: translateY(-25%);
                                    transition: 0.25s ease-out;
                                }

                                &::after {
                                    opacity: 1;
                                    transform: translateY(0);
                                    transition: 0.75s 0.1s var(--ease-out-exponential);
                                }
                            }
                        }
                    }


                }
            }
            .item-preview{
                padding: 2rem 0;
                line-height: 24px;
                text-overflow: ellipsis;
                text-indent: 2em;
                p{
                    // text-indent: 2em;
                    color: var(--text-dark);
                }
            }
        }
    }
}
</style>